<template>
    <div class="app-container">
        <el-row :gutter="20">
            <!--部门数据-->
            <el-col :span="4" :xs="24">
                <div class="head-container">
                    <!-- <el-input
                        v-model="deptName"
                        clearable
                        size="small"
                        prefix-icon="el-icon-search"
                        style="margin-bottom: 20px"
                    /> -->
                    <el-button @click="scaleTree" type="text">{{
                        boolExpand ? "全部收起" : "全部展开"
                    }}</el-button>
                </div>

                <div class="head-container">
                    <el-tree
                        :data="deptOptions"
                        :props="defaultProps"
                        :expand-on-click-node="false"
                        :filter-node-method="filterNode"
                        ref="tree"
                        default-expand-all
                        highlight-current
                        node-key="id"
                        @node-click="handleNodeClick"
                    />
                </div>
            </el-col>
            <!--用户数据-->
            <el-col :span="20" :xs="24">
                <el-form
                    :model="queryParams"
                    ref="queryForm"
                    size="small"
                    :inline="true"
                    v-show="showSearch"
                    label-width="68px"
                >
                    <el-form-item label="员工姓名" prop="nickName">
                        <el-input
                            v-model="queryParams.nickName"
                            clearable
                            style="width: 240px"
                            @keyup.enter.native="handleQuery"
                        />
                    </el-form-item>
                    <el-form-item label="工号" prop="staffNum">
                        <el-input
                            v-model="queryParams.staffNum"
                            clearable
                            style="width: 240px"
                            @keyup.enter.native="handleQuery"
                        />
                    </el-form-item>
                    <!-- <el-form-item label="手机号码" prop="phonenumber">
                        <el-input
                            v-model="queryParams.phonenumber"
                            placeholder="请输入手机号码"
                            clearable
                            style="width: 240px"
                            @keyup.enter.native="handleQuery"
                        />
                    </el-form-item> -->
                    <el-form-item label="用户状态" prop="status">
                        <el-select
                            v-model="queryParams.status"
                            placeholder=""
                            clearable
                            style="width: 240px"
                        >
                            <el-option
                                v-for="dict in dict.type.sys_normal_disable"
                                :key="dict.value"
                                :label="dict.label"
                                :value="dict.value"
                            />
                        </el-select>
                    </el-form-item>
                    <!-- <el-form-item label="创建时间">
                        <el-date-picker
                            v-model="dateRange"
                            style="width: 240px"
                            value-format="yyyy-MM-dd"
                            type="daterange"
                            range-separator="-"
                            start-placeholder="开始日期"
                            end-placeholder="结束日期"
                        ></el-date-picker>
                    </el-form-item> -->
                    <el-form-item>
                        <el-button
                            type="primary"
                            icon="el-icon-search"
                            size="mini"
                            @click="handleQuery"
                            >查询
                        </el-button>
                        <el-button
                            icon="el-icon-refresh"
                            size="mini"
                            @click="resetQuery"
                            >重置</el-button
                        >
                    </el-form-item>
                </el-form>
                <TableCard>
                    <!-- <el-row :gutter="10" class="mb8">
                        <el-col :span="1.5">
                            <el-button
                                type="primary"
                                plain
                                icon="el-icon-plus"
                                size="mini"
                                @click="handleAdd"
                                v-hasPermi="['system:user:add']"
                                >新增</el-button
                            >
                        </el-col>
                        <el-col :span="1.5"> -->
                    <!-- <el-button
                                type="success"
                                plain
                                icon="el-icon-edit"
                                size="mini"
                                :disabled="single"
                                @click="handleUpdate"
                                v-hasPermi="['system:user:edit']"
                                >修改</el-button
                            > -->
                    <!-- </el-col>
                        <el-col :span="1.5">
                            <el-button
                                type="danger"
                                plain
                                icon="el-icon-delete"
                                size="mini"
                                :disabled="multiple"
                                @click="handleDelete"
                                v-hasPermi="['system:user:remove']"
                                >删除</el-button
                            >
                        </el-col>
                        <el-col :span="1.5">
                            <el-button
                                type="info"
                                plain
                                icon="el-icon-upload2"
                                size="mini"
                                @click="handleImport"
                                v-hasPermi="['system:user:import']"
                                >导入</el-button
                            >
                        </el-col>
                        <el-col :span="1.5">
                            <el-button
                                type="warning"
                                plain
                                icon="el-icon-download"
                                size="mini"
                                @click="handleExport"
                                v-hasPermi="['system:user:export']"
                                >导出</el-button
                            >
                        </el-col>
                        <right-toolbar
                            :showSearch.sync="showSearch"
                            @queryTable="getList"
                        ></right-toolbar>
                    </el-row> -->

                    <el-table
                        :border="Global.tableShowBorder"
                        v-loading="loading"
                        :data="userList"
                        @selection-change="handleSelectionChange"
                    >
                        <!-- <el-table-column
                            type="selection"
                            width="50"
                            align="center"
                        /> -->
                        <el-table-column
                            type="index"
                            width="50"
                            label="序号"
                            align="center"
                        >
                        </el-table-column>

                        <el-table-column
                            label="姓名"
                            align="center"
                            key="nickName"
                            prop="nickName"
                            v-if="columns[0].visible"
                        >
                        </el-table-column>

                        <el-table-column
                            label="工号"
                            align="center"
                            key="staffNum"
                            prop="staffNum"
                            v-if="columns[0].visible"
                        >
                        </el-table-column>
                        <el-table-column
                            label="登录账号"
                            align="center"
                            key="userName"
                            prop="userName"
                            v-if="columns[1].visible"
                            :show-overflow-tooltip="true"
                        />
                        <el-table-column
                            label="岗位名称"
                            align="center"
                            prop="postIdString"
                        >
                            <template slot-scope="scope">
                                <span>{{
                                    parsePostName(scope.row.postIdString)
                                }}</span>
                            </template>
                        </el-table-column>
                        <el-table-column
                            label="系统角色"
                            align="center"
                            key="deptName"
                            prop="roleIdsString"
                            :show-overflow-tooltip="true"
                        >
                            <template #default="{ row }">
                                <span>{{
                                    row.roleIdsString ? row.roleIdsString : "—"
                                }}</span>
                            </template>
                        </el-table-column>

                        <!-- <el-table-column
                            label="手机号码"
                            align="center"
                            key="phonenumber"
                            prop="phonenumber"
                            v-if="columns[4].visible"
                            width="120"
                        /> -->
                        <el-table-column
                            label="用户状态"
                            align="center"
                            key="status"
                            v-if="columns[5].visible"
                        >
                            <template slot-scope="scope">
                                <span>{{
                                    scope.row.status == 0 ? "已启用" : "已禁用"
                                }}</span>
                                <!-- <el-switch
                                    v-model="scope.row.status"
                                    active-value="0"
                                    inactive-value="1"
                                    @change="handleStatusChange(scope.row)"
                                ></el-switch> -->
                            </template>
                        </el-table-column>
                        <!-- <el-table-column
                            label="创建时间"
                            align="center"
                            prop="createTime"
                            v-if="columns[6].visible"
                            width="160"
                        >
                            <template slot-scope="scope">
                                <span>{{
                                    parseTime(scope.row.createTime)
                                }}</span>
                            </template>
                        </el-table-column> -->
                        <el-table-column
                            label="操作"
                            align="center"
                            width="240"
                            class-name="small-padding fixed-width"
                        >
                            <template
                                slot-scope="scope"
                                v-if="scope.row.userId !== 1"
                            >
                                <el-button
                                    size="mini"
                                    type="text"
                                    @click="handleRole(scope.row)"
                                    v-hasPermi="['system:user:edit']"
                                    >角色配置</el-button
                                >

                                <el-button
                                    size="mini"
                                    type="text"
                                    :disabled="scope.row.status == 0"
                                    @click="handleStatusChange(scope.row)"
                                    >启用</el-button
                                >
                                <el-button
                                    size="mini"
                                    type="text"
                                    :disabled="scope.row.status == 1"
                                    @click="handleStatusChange(scope.row)"
                                    >禁用</el-button
                                >

                                <!-- <el-button
                                    size="mini"
                                    type="text"
                                    @click="handleUpdate(scope.row)"
                                    v-hasPermi="['system:user:edit']"
                                    >修改</el-button
                                > -->
                                <!-- <el-button
                                    size="mini"
                                    type="text"
                                    @click="handleDelete(scope.row)"
                                    v-hasPermi="['system:user:remove']"
                                    >删除</el-button
                                > -->
                                <el-button
                                    size="mini"
                                    type="text"
                                    @click="changePassword(scope.row)"
                                    v-hasPermi="['system:user:resetPwd']"
                                    >重置密码</el-button
                                >
                            </template>
                        </el-table-column>
                    </el-table>

                    <pagination
                        v-show="
                            total > 10 &&
                            this.$store.getters.allDefectObj['HR-WEB-008'] == 1
                        "
                        :total="total"
                        :page.sync="queryParams.pageNum"
                        :limit.sync="queryParams.pageSize"
                        @pagination="getList"
                    />
                </TableCard>
            </el-col>
        </el-row>

        <!-- 添加或修改用户配置对话框 -->
        <el-dialog
            :title="title"
            :visible.sync="open"
            width="1000px"
            append-to-body
        >
            <el-form
                ref="form"
                :model="form"
                :rules="rules"
                label-width="120px"
            >
                <el-row>
                    <el-col :span="12" v-show="!boolRole">
                        <el-form-item label="用户昵称" prop="nickName">
                            <el-input
                                v-model="form.nickName"
                                placeholder="请输入用户昵称"
                                maxlength="30"
                            />
                        </el-form-item>
                    </el-col>

                    <el-col v-show="!boolRole" :span="12">
                        <el-form-item label="归属部门" prop="deptId">
                            <treeselect
                                v-model="form.deptId"
                                :options="deptOptions"
                                :show-count="true"
                                placeholder="请选择归属部门"
                            />
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row v-show="!boolRole">
                    <el-col :span="12">
                        <el-form-item label="手机号码" prop="phonenumber">
                            <el-input
                                v-model="form.phonenumber"
                                placeholder="请输入手机号码"
                                maxlength="11"
                            />
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="邮箱" prop="email">
                            <el-input
                                v-model="form.email"
                                placeholder="请输入邮箱"
                                maxlength="50"
                            />
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12" v-show="!boolRole">
                        <el-form-item
                            v-if="form.userId == undefined"
                            label="姓名"
                            prop="userName"
                        >
                            <el-input
                                v-model="form.userName"
                                placeholder="请输入姓名"
                                maxlength="30"
                            />
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item
                            v-if="form.userId == undefined"
                            label="用户密码"
                            prop="password"
                        >
                            <el-input
                                v-model="form.password"
                                placeholder="请输入用户密码"
                                type="password"
                                maxlength="20"
                                show-password
                            />
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row v-show="!boolRole">
                    <el-col :span="12">
                        <el-form-item label="用户性别">
                            <el-select
                                v-model="form.sex"
                                placeholder="请选择性别"
                            >
                                <el-option
                                    v-for="dict in dict.type.sys_user_sex"
                                    :key="dict.value"
                                    :label="dict.label"
                                    :value="dict.value"
                                ></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="状态">
                            <el-radio-group v-model="form.status">
                                <el-radio
                                    v-for="dict in dict.type.sys_normal_disable"
                                    :key="dict.value"
                                    :label="dict.value"
                                    >{{ dict.label }}</el-radio
                                >
                            </el-radio-group>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12" v-show="!boolRole">
                        <el-form-item label="职位">
                            <el-select
                                v-model="form.postIds"
                                multiple
                                placeholder="请选择职位"
                            >
                                <el-option
                                    v-for="item in postOptions"
                                    :key="item.postId"
                                    :label="item.postName"
                                    :value="item.postId"
                                    :disabled="item.status == 1"
                                ></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12" v-show="boolRole">
                        <el-form-item label="姓名(工号)" prop="nickName">
                            <span>{{
                                form.nickName + "(" + form.staffNum + ")"
                            }}</span>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="角色">
                            <el-select
                                v-model="form.roleIds"
                                multiple
                                placeholder="请选择角色"
                            >
                                <el-option
                                    v-for="item in roleOptions"
                                    v-show="item.roleId != 1"
                                    :key="item.roleId"
                                    :label="item.roleName"
                                    :value="item.roleId"
                                    :disabled="item.status == 0"
                                ></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row v-show="!boolRole">
                    <el-col :span="24">
                        <el-form-item label="备注">
                            <el-input
                                v-model="form.remark"
                                type="textarea"
                                placeholder="请输入内容"
                            ></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="submitForm">保 存</el-button>
                <el-button @click="cancel">关 闭</el-button>
            </div>
        </el-dialog>

        <el-dialog
            :title="title"
            :visible.sync="roleVision"
            width="350px"
            append-to-body
        >
            <el-form
                ref="form"
                :model="form"
                :rules="rules"
                label-width="120px"
            >
                <el-row>
                    <el-col :span="24" v-show="boolRole">
                        <el-form-item label="姓名(工号)" prop="nickName">
                            <el-input
                                v-model="form.showName"
                                :disabled="
                                    $store.getters.allDefectObj['HR-WEB-009'] ==
                                    1
                                "
                            >
                            </el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="24">
                        <el-checkbox-group
                            v-model="checkList"
                        ></el-checkbox-group>
                        <el-form-item label="角色">
                            <el-checkbox-group v-model="form.roleIds">
                                <el-checkbox
                                    v-for="item in roleOptions"
                                    v-show="item.roleId != 1 && item.roleId != 114"
                                    :key="item.roleId"
                                    :label="item.roleId"
                                    :value="item.roleId"
                                    :disabled="item.roleId == '110'"
                                    >{{ item.roleName }}</el-checkbox
                                >
                            </el-checkbox-group>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="submitForm">保 存</el-button>
                <el-button @click="cancel">关 闭</el-button>
            </div>
        </el-dialog>

        <!-- 重置密码对话框 -->
        <el-dialog
            :title="rsTitle"
            :visible.sync="rpVision"
            width="350px"
            append-to-body
        >
            <!-- bug11和bug12都不开 -->
            <el-form
                v-if="
                    this.$store.getters.allDefectObj['HR-WEB-011'] == 1 &&
                    this.$store.getters.allDefectObj['HR-WEB-012'] == 1
                "
                ref="rpForm"
                :model="rpForm"
                :rules="rpRules"
                label-width="120px"
            >
                <el-row>
                    <el-col :span="24">
                        <el-form-item label="姓名(工号)" prop="nickName">
                            <span>{{
                                rpForm.nickName + "(" + rpForm.staffNum + ")"
                            }}</span>
                        </el-form-item></el-col
                    >
                    <el-col :span="24">
                        <el-form-item label="新密码" prop="password">
                            <el-input
                                v-model="rpForm.password"
                                maxlength="50"
                                placeholder=""
                                type="password"
                                show-password
                            />
                        </el-form-item>
                    </el-col>
                    <el-col :span="24">
                        <el-form-item label="确定密码" prop="confirmPassword">
                            <el-input
                                v-model="rpForm.confirmPassword"
                                maxlength="50"
                                placeholder=""
                                type="password"
                                show-password
                            />
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>

            <!-- bug11开bug12不开 -->
            <el-form
                v-if="
                    this.$store.getters.allDefectObj['HR-WEB-011'] == 0 &&
                    this.$store.getters.allDefectObj['HR-WEB-012'] == 1
                "
                ref="rpForm"
                :model="rpForm"
                :rules="rpRules"
                label-width="120px"
                :hide-required-asterisk="true"
            >
                <el-row>
                    <el-col :span="24">
                        <el-form-item label="姓名(工号)" prop="nickName">
                            <span>{{
                                rpForm.nickName + "(" + rpForm.userName + ")"
                            }}</span>
                        </el-form-item></el-col
                    >
                    <el-col :span="24">
                        <el-form-item label="新密码" prop="password">
                            <el-input
                                v-model="rpForm.password"
                                maxlength="50"
                                placeholder="请输入密码"
                                type="password"
                                show-password
                            />
                        </el-form-item>
                    </el-col>
                    <el-col :span="24">
                        <el-form-item label="确定密码" prop="confirmPassword">
                            <el-input
                                v-model="rpForm.confirmPassword"
                                maxlength="50"
                                placeholder="请输入密码"
                                type="password"
                                show-password
                            />
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>

            <!-- bug11不开bug12不开 -->
            <el-form
                v-if="
                    this.$store.getters.allDefectObj['HR-WEB-011'] == 1 &&
                    this.$store.getters.allDefectObj['HR-WEB-012'] == 0
                "
                ref="rpForm"
                :model="rpForm"
                :rules="rpRules"
                label-width="120px"
                :show-message="false"
            >
                <el-row>
                    <el-col :span="24">
                        <el-form-item label="姓名(工号)" prop="nickName">
                            <span>{{
                                rpForm.nickName + "(" + rpForm.userName + ")"
                            }}</span>
                        </el-form-item></el-col
                    >
                    <el-col :span="24">
                        <el-form-item label="新密码" prop="password">
                            <el-input
                                v-model="rpForm.password"
                                maxlength="50"
                                placeholder="请输入密码"
                                type="password"
                                show-password
                            />
                        </el-form-item>
                    </el-col>
                    <el-col :span="24">
                        <el-form-item label="确定密码" prop="confirmPassword">
                            <el-input
                                v-model="rpForm.confirmPassword"
                                maxlength="50"
                                placeholder="请输入密码"
                                type="password"
                                show-password
                            />
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <!-- bug11开bug12开 -->
            <el-form
                v-if="
                    this.$store.getters.allDefectObj['HR-WEB-011'] == 0 &&
                    this.$store.getters.allDefectObj['HR-WEB-012'] == 0
                "
                ref="rpForm"
                :model="rpForm"
                label-width="120px"
                :show-message="false"
                :hide-required-asterisk="true"
            >
                <el-row>
                    <el-col :span="24">
                        <el-form-item label="姓名(工号)" prop="nickName">
                            <span>{{
                                rpForm.nickName + "(" + rpForm.userName + ")"
                            }}</span>
                        </el-form-item></el-col
                    >
                    <el-col :span="24">
                        <el-form-item label="新密码" prop="password">
                            <el-input
                                v-model="rpForm.password"
                                maxlength="50"
                                placeholder="请输入密码"
                                type="password"
                                show-password
                            />
                        </el-form-item>
                    </el-col>
                    <el-col :span="24">
                        <el-form-item label="确定密码" prop="confirmPassword">
                            <el-input
                                v-model="rpForm.confirmPassword"
                                maxlength="50"
                                placeholder="请输入密码"
                                type="password"
                                show-password
                            />
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="rsSubmit">保 存</el-button>
                <el-button @click="rsCancel">关 闭</el-button>
            </div>
        </el-dialog>

        <!-- 用户导入对话框 -->
        <el-dialog
            :title="upload.title"
            :visible.sync="upload.open"
            width="400px"
            append-to-body
        >
            <el-upload
                ref="upload"
                :limit="1"
                accept=".xlsx, .xls"
                :headers="upload.headers"
                :action="upload.url + '?updateSupport=' + upload.updateSupport"
                :disabled="upload.isUploading"
                :on-progress="handleFileUploadProgress"
                :on-success="handleFileSuccess"
                :auto-upload="false"
                drag
            >
                <i class="el-icon-upload"></i>
                <div class="el-upload__text">
                    将文件拖到此处，或<em>点击上传</em>
                </div>
                <div class="el-upload__tip text-center" slot="tip">
                    <div class="el-upload__tip" slot="tip">
                        <el-checkbox v-model="upload.updateSupport" />
                        是否更新已经存在的用户数据
                    </div>
                    <span>仅允许导入xls、xlsx格式文件。</span>
                    <el-link
                        type="primary"
                        :underline="false"
                        style="font-size: 12px; vertical-align: baseline"
                        @click="importTemplate"
                    >
                        下载模板
                    </el-link>
                </div>
            </el-upload>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="submitFileForm"
                    >确 定</el-button
                >
                <el-button @click="upload.open = false">取 消</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import {
    listUser,
    getUser,
    delUser,
    addUser,
    updateUser,
    resetUserPwd,
    changeUserStatus,
} from "@/api/system/user";
import { getToken } from "@/utils/auth";
import { treeselect } from "@/api/system/dept";
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
import { listPostAll } from "@/api/system/post";

export default {
    name: "User",
    dicts: ["sys_normal_disable", "sys_user_sex"],
    components: { Treeselect },
    data() {
        return {
            // 遮罩层
            loading: true,
            // 选中数组
            ids: [],
            // 非单个禁用
            single: true,
            // 非多个禁用
            multiple: true,
            // 显示查询条件
            showSearch: true,
            // 总条数
            total: 0,
            // 用户表格数据
            userList: null,
            // 弹出层标题
            title: "",
            // 部门树选项
            deptOptions: [],
            // 是否显示弹出层
            open: false,
            // 部门名称
            deptName: undefined,
            // 默认密码
            initPassword: undefined,
            // 日期范围
            dateRange: [],
            // 职位选项
            postOptions: [],
            // 角色选项
            roleOptions: [],
            // 表单参数
            form: {},
            defaultProps: {
                children: "children",
                label: "label",
            },
            // 用户导入参数
            upload: {
                // 是否显示弹出层（用户导入）
                open: false,
                // 弹出层标题（用户导入）
                title: "",
                // 是否禁用上传
                isUploading: false,
                // 是否更新已经存在的用户数据
                updateSupport: 0,
                // 设置上传的请求头部
                headers: { Authorization: "Bearer " + getToken() },
                // 上传的地址
                url: process.env.VUE_APP_BASE_API + "/system/user/importData",
            },
            // 查询参数
            queryParams: {
                pageNum: 1,
                pageSize:
                    this.$store.getters.allDefectObj["HR-WEB-008"] == 0
                        ? 99999
                        : 10,
                userName: undefined,
                phonenumber: undefined,
                status: undefined,
                deptId: undefined,
                staffNum: undefined,
            },
            // 列信息
            columns: [
                { key: 0, label: `用户编号`, visible: true },
                { key: 1, label: `姓名`, visible: true },
                { key: 2, label: `用户昵称`, visible: true },
                { key: 3, label: `部门`, visible: true },
                { key: 4, label: `手机号码`, visible: true },
                { key: 5, label: `状态`, visible: true },
                { key: 6, label: `创建时间`, visible: true },
            ],
            // 表单校验
            rules: {
                userName: [
                    {
                        required: true,
                        message: "姓名不能为空",
                        trigger: "blur",
                    },
                    {
                        min: 2,
                        max: 20,
                        message: "姓名长度必须介于 2 和 20 之间",
                        trigger: "blur",
                    },
                ],
                nickName: [
                    {
                        required: true,
                        message: "用户昵称不能为空",
                        trigger: "blur",
                    },
                ],
                password: [
                    {
                        required: true,
                        message: "用户密码不能为空",
                        trigger: "blur",
                    },
                    {
                        min: 5,
                        max: 20,
                        message: "用户密码长度必须介于 5 和 20 之间",
                        trigger: "blur",
                    },
                ],
                email: [
                    {
                        type: "email",
                        message: "请输入正确的邮箱地址",
                        trigger: ["blur", "change"],
                    },
                ],
                phonenumber: [
                    {
                        pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
                        message: "请输入正确的手机号码",
                        trigger: "blur",
                    },
                ],
            },

            // 左侧树的展开与收起
            boolExpand: true, //默认全部展开
            //显示角色配置
            boolRole: false,
            rsTitle: "重置密码",
            //修改密码弹窗
            rpVision: false,
            rpForm: {
                password: null,
                confirmPassword: null,
            },
            rpRules: {
                password: [
                    {
                        required: true,
                        message: "新密码不能为空",
                        trigger: "blur",
                    },
                    {
                        min: 6,
                        max: 60,
                        message: "新密码长度必须介于 6 和 50 之间",
                        trigger: "blur",
                    },
                ],
                confirmPassword: [
                    {
                        required: true,
                        message: "确定密码不能为空",
                        trigger: "blur",
                    },
                    {
                        min: 6,
                        max: 50,
                        message: "确定密码长度必须介于 6 和 50 之间",
                        trigger: "blur",
                    },
                ],
            },
            //角色弹窗
            roleVision: false,
            checkList: [],
        };
    },
    watch: {
        // 根据名称筛选部门树
        deptName(val) {
            this.$refs.tree.filter(val);
        },
    },
    created() {
        // this.getList();
        this.getPostList();
        this.getTreeselect();
        this.getConfigKey("sys.user.initPassword").then((response) => {
            this.initPassword = response.msg;
        });
    },
    methods: {
        parsePostName(ids) {
            if (ids) {
                let nameArr = [];
                let selIds = ids.split(",");
                this.postList.forEach((item) => {
                    selIds.forEach((sel) => {
                        if (item.postId == sel) {
                            nameArr.push(item.postName);
                        }
                    });
                });
                return nameArr.join(",");
            }
            return "—";
        },
        getPostList() {
            listPostAll().then((res) => {
                this.postList = res.data;
            });
        },

        /** 查询用户列表 */
        getList() {
            this.loading = true;
            listUser(this.addDateRange(this.queryParams, this.dateRange)).then(
                (response) => {
                    this.userList = response.rows;
                    console.log(this.userList);
                    this.total = response.total;
                    this.loading = false;
                }
            );
        },
        /** 查询部门下拉树结构 */
        getTreeselect() {
            treeselect().then((response) => {
                this.deptOptions = response.data;
                // 在数据加载完成后，选中根节点
                if (response.data.length > 0) {
                    this.currentId = response.data[0].id;
                    this.$nextTick(() => {
                        this.$refs.tree.setCurrentKey(this.currentId);
                        this.queryParams.deptId = this.currentId;
                        this.getList();
                    });
                }
            });
        },
        // 筛选节点
        filterNode(value, data) {
            if (!value) return true;
            return data.label.indexOf(value) !== -1;
        },
        // 节点单击事件
        handleNodeClick(data) {
            this.queryParams.deptId = data.id;
            this.handleQuery();
        },
        // 用户状态修改
        handleStatusChange(row) {
            let text = row.status === "1" ? "启用" : "停用";
            this.$modal
                .confirm(
                    `${
                        row.status == 1
                            ? "确认要启用该用户吗？"
                            : "禁用用户后，用户将无法登录系统，确定要禁用该用户吗？"
                    }`
                )
                .then(function () {
                    return changeUserStatus(row.userId, String(row.status));
                })
                .then(() => {
                    this.$modal.msgSuccess(text + "成功");
                    this.getList();
                })
                .catch(function () {});
        },
        // 取消按钮
        cancel() {
            this.roleVision = false;
            this.open = false;
            this.reset();
        },
        // 表单重置
        reset() {
            this.form = {
                userId: undefined,
                deptId: undefined,
                userName: undefined,
                nickName: undefined,
                password: undefined,
                phonenumber: undefined,
                email: undefined,
                sex: undefined,
                status: "0",
                remark: undefined,
                postIds: [],
                roleIds: [],
            };

            this.boolRole = false;
            this.resetForm("form");
        },
        /** 查询按钮操作 */
        handleQuery() {
            this.queryParams.pageNum = 1;
            this.getList();
        },
        /** 重置按钮操作 */
        resetQuery() {
            this.dateRange = [];
            this.resetForm("queryForm");
            this.handleQuery();
        },
        // 多选框选中数据
        handleSelectionChange(selection) {
            this.ids = selection.map((item) => item.userId);
            this.single = selection.length != 1;
            this.multiple = !selection.length;
        },
        // 更多操作触发
        handleCommand(command, row) {
            switch (command) {
                case "handleResetPwd":
                    this.handleResetPwd(row);
                    break;
                case "handleAuthRole":
                    this.handleAuthRole(row);
                    break;
                default:
                    break;
            }
        },
        /** 新增按钮操作 */
        handleAdd() {
            this.reset();
            this.getTreeselect();
            getUser().then((response) => {
                this.postOptions = response.posts;
                this.roleOptions = response.roles;
                this.open = true;
                this.title = "添加用户";
                this.form.password = this.initPassword;
            });
        },
        /** 修改按钮操作 */
        handleUpdate(row) {
            this.reset();
            this.getTreeselect();
            const userId = row.userId || this.ids;
            getUser(userId).then((response) => {
                this.form = response.data;
                this.postOptions = response.posts;
                this.roleOptions = response.roles;
                this.form.postIds = response.postIds;
                this.form.roleIds = response.roleIds;
                this.open = true;
                this.title = "修改用户";
                this.form.password = "";
            });
        },
        handleRole(row) {
            this.reset();
            this.boolRole = true;
            // this.getTreeselect();
            const userId = row.userId || this.ids;
            getUser(userId).then((response) => {
                this.form = response.data;
                this.postOptions = response.posts;
                this.roleOptions = response.roles;
                this.form.postIds = response.postIds;
                this.form.roleIds = response.roleIds.length
                    ? response.roleIds
                    : [110];

                // this.form.showName = ` ${this.form.nickName}(${this.form.userId})`;
                this.$set(
                    this.form,
                    "showName",
                    ` ${this.form.nickName}(${this.form.staffNum})`
                );

                this.roleVision = true;
                this.title = "角色配置";
                this.form.password = "";
            });
        },
        /** 重置密码按钮操作 */
        handleResetPwd(row) {
            this.$prompt('请输入"' + row.userName + '"的新密码', "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                closeOnClickModal: false,
                inputPattern: /^.{5,20}$/,
                inputErrorMessage: "用户密码长度必须介于 5 和 20 之间",
            })
                .then(({ value }) => {
                    resetUserPwd(row.userId, value).then((response) => {
                        this.$modal.msgSuccess("修改成功，新密码是：" + value);
                    });
                })
                .catch(() => {});
        },
        /** 分配角色操作 */
        handleAuthRole: function (row) {
            const userId = row.userId;
            this.$router.push("/system/user-auth/role/" + userId);
        },
        /** 提交按钮 */
        submitForm: function () {
            this.$refs["form"].validate((valid) => {
                if (this.$store.getters.allDefectObj["HR-WEB-010"] == 0) {
                    this.roleVision = false;
                    this.open = false;
                    return;
                }
                if (valid) {
                    if (this.form.userId != undefined) {
                        updateUser(this.form).then((response) => {
                            this.roleVision = false;
                            this.open = false;
                            this.getList();
                        });
                    } else {
                        addUser(this.form).then((response) => {
                            this.$modal.msgSuccess("新增成功");
                            this.roleVision = false;
                            this.open = false;
                            this.getList();
                        });
                    }
                }
            });
        },
        /** 删除按钮操作 */
        handleDelete(row) {
            const userIds = row.userId || this.ids;
            this.$modal
                .confirm('是否确认删除用户编号为"' + userIds + '"的数据项？')
                .then(function () {
                    return delUser(userIds);
                })
                .then(() => {
                    this.getList();
                    this.$modal.msgSuccess("删除成功");
                })
                .catch(() => {});
        },
        /** 导出按钮操作 */
        handleExport() {
            this.download(
                "system/user/export",
                {
                    ...this.queryParams,
                },
                `user_${new Date().getTime()}.xlsx`
            );
        },
        /** 导入按钮操作 */
        handleImport() {
            this.upload.title = "用户导入";
            this.upload.open = true;
        },
        /** 下载模板操作 */
        importTemplate() {
            this.download(
                "system/user/importTemplate",
                {},
                `user_template_${new Date().getTime()}.xlsx`
            );
        },
        // 文件上传中处理
        handleFileUploadProgress(event, file, fileList) {
            this.upload.isUploading = true;
        },
        // 文件上传成功处理
        handleFileSuccess(response, file, fileList) {
            this.upload.open = false;
            this.upload.isUploading = false;
            this.$refs.upload.clearFiles();
            this.$alert(
                "<div style='overflow: auto;overflow-x: hidden;max-height: 70vh;padding: 10px 20px 0;'>" +
                    response.msg +
                    "</div>",
                "导入结果",
                { dangerouslyUseHTMLString: true }
            );
            this.getList();
        },
        // 提交上传文件
        submitFileForm() {
            this.$refs.upload.submit();
        },

        //左侧树的缩放
        scaleTree() {
            for (
                let i = 0;
                i < this.$refs.tree.store._getAllNodes().length;
                i++
            ) {
                // 遍历 el-tree 的每个节点，将节点的 expanded 属性设为 true 或 false
                this.$refs.tree.store._getAllNodes()[i].expanded =
                    !this.boolExpand;
            }
            this.boolExpand = !this.boolExpand;
        },

        //重置密码弹窗
        rsSubmit() {
            if (
                this.$store.getters.allDefectObj["HR-WEB-012"] == 0 &&
                (!this.rpForm.password || !this.rpForm.confirmPassword)
            ) {
                this.rpVision = false;
                return;
            }
            if (this.$store.getters.allDefectObj["HR-WEB-012"] == 0) {
                if (this.rpForm.password != this.rpForm.confirmPassword) {
                    this.$modal.msgError("新密码与确认密码不一致");
                } else {
                    resetUserPwd(this.rpForm.userId, this.rpForm.password).then(
                        (response) => {
                            this.$modal.msgSuccess("重置成功");
                            this.rpVision = false;
                        }
                    );
                }
            }
            this.$refs["rpForm"].validate((valid) => {
                if (valid) {
                    if (this.rpForm.password != this.rpForm.confirmPassword) {
                        this.$modal.msgError("新密码与确认密码不一致");
                    } else {
                        resetUserPwd(
                            this.rpForm.userId,
                            this.rpForm.password
                        ).then((response) => {
                            this.$modal.msgSuccess("重置成功");
                            this.rpVision = false;
                        });
                    }
                }
            });
        },
        rsCancel() {
            this.resetRp();
            this.rpVision = false;
        },
        changePassword(row) {
            this.resetRp();
            this.rpForm.nickName = row.nickName;
            this.rpForm.userId = row.userId;
            this.rpForm.staffNum = row.staffNum;
            this.rpForm.userName = row.userName;
            this.rpVision = true;
        },
        resetRp() {
            this.resetForm("rpForm");
        },
    },
};
</script>
